<style>
	 .layui-form-item  {
        margin: 0px;
        padding: 0px;
    } 
</style>
<div class="layuimini-main layuimini-panel" >

<div class="layui-tab" >
  <ul class="layui-tab-title">
    <li class="layui-this" >基本参数</li>
    <li>数据处理</li>
    <li>协议测试</li>
  </ul>
  <div class="layui-tab-content" >

  <div class="layui-tab-item layui-show " style="overflow:visible " >
 
    <div class="layui-form " >
        <div class="layui-form-item" >
			<div class="layui-inline">
				<label class="layui-form-label required" alt="范围为:（0-255）">设备地址</label>
				<div class="layui-input-block">
					<input type="number" name="slaveid" min="0" max="255" lay-verify="required" value="1" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label required">功能别名</label>
				<div class="layui-input-block">
					<input type="text" name="slavename" lay-verify="required"  placeholder="请输入功能别名" value="" class="layui-input">
				</div>
			</div>
		</div>
		
		<div class="layui-form-item" >
			<div class="layui-inline" style="width:98%">
				<label class="layui-form-label required">功能码</label>
				<div class="layui-input-block" >
						<select name="function" >
								<option value=""></option>
								<option value="0x01">01H 读线圈寄存器 00001-09999 0000H-FFFFH	位操作</option>
								<option value="0x02">02H 读离散输入寄存器 10001-19999	0000H-FFFFH	位操作</option>
								<option value="0x03">03H 读保持寄存器 40001-49999	0000H-FFFFH	字操作	</option>
								<option value="0x04">04H 读输入寄存器 30001-39999	0000H-FFFFH	字操作</option>
								<option value="0x05">05H 写单个线圈寄存器 00001-09999	0000H-FFFFH	位操作	</option>
								<option value="0x0f">0FH 写多个线圈寄存器 00001-09999	0000H-FFFFH	字操作</option>
								<option value="0x06">06H 写单个保持寄存器 40001-49999	0000H-FFFFH 位操作</option>
								<option value="0x10">10H 写多个保持寄存器 40001-49999	0000H-FFFFH 字操作</option>
							</select>
				</div>
  			</div>
      </div>

	  <div class="layui-form-item">
			<div class="layui-inline ">
					<label class="layui-form-label required">地址模式</label>
					<div class="layui-input-block">
						<input type="radio" name="addrmode" autocomplete="off" value="Dec" title="十进制" checked="">
						<input type="radio" name="addrmode" value="Hex" title="十六进制">
					</div>
			</div>
        </div>


		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label required">寄存器地址</label>
				<div class="layui-input-block"  style="width: 60px;">
					<input type="text" name="addr" lay-verify="required" autocomplete="off"  value="1" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label" >寄存器个数</label>
				<div class="layui-input-block" style="width: 60px;">
					<input type="number" name="addr_count"  value="1" autocomplete="off"  class="layui-input">
				</div>
			</div>
			<div class="layui-inline" >
				<label class="layui-form-label">应答超时</label>
				<div class="layui-input-block" style="width: 80px;">
					<input type="number" min="100" max=""  step="100"  name="resptimeout"  value="1000" autocomplete="off"  class="layui-input">
				</div> 

			</div>
		</div>


		<div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="desc" class="layui-textarea" style="height:10px" placeholder="请输入备注信息" autocomplete="off"></textarea>
            </div>
        </div>

		<fieldset class="layui-elem-field layui-field-title" >
		    <legend>请求指令</legend>
			   <div class="layui-form-item">
					<label class="layui-form-label">RTU</label>
					<div class="layui-input-block">
						<label class="layui-input" >
					</div>
				</div>
				 <div class="layui-form-item">
					<label class="layui-form-label">ASCII</label>
					<div class="layui-input-block">
						<label class="layui-input"  >
					</div>
				</div>
        </fieldset>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button> <button class="layui-btn layui-btn-danger" id="closeBtn">关闭</button>
            </div>
        </div>
    </div>
  </div><!--end layui-tab-item-->


  <div class="layui-tab-item">
		<fieldset class="layui-elem-field layui-field-title" >
		    <legend>返回数据定义</legend>
					<div class="layui-form-item">
						<table classx="layui-hide" id="subTableId" style="border:2px"></table>
					</div>
        </fieldset>
  </div>

  <div class="layui-tab-item">内容3</div>
  <div class="layui-tab-item">内容4</div>
  <div class="layui-tab-item">内容5</div>

	</div>

	</div>

</div>



<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table2 = layui.table,

            $ = layui.$; 

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();


		table2.render({
            elem: '#subTableId',
            //url: '/api/device.json',
			height:380,
            cols: [[
				{type: 'numbers', title: '', fixed: 'left' },
				{field: '',title:"Name"},
                {field: 'id',title:"Address"}
            ]],
            page: false,
            even: false,
            skin: 'line',
			data:[{
				  "id": "10001"
				  ,"username": "杜甫"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "116"
				  ,"ip": "192.168.0.8"
				  ,"logins": "108"
				  ,"joinTime": "2016-10-14"
				}, {
				  "id": "10002"
				  ,"username": "李白"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "12"
				  ,"ip": "192.168.0.8"
				  ,"logins": "106"
				  ,"joinTime": "2016-10-14"
				  ,"LAY_CHECKED": true
				}, {
				  "id": "10003"
				  ,"username": "王勃"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "65"
				  ,"ip": "192.168.0.8"
				  ,"logins": "106"
				  ,"joinTime": "2016-10-14"
				}, {
				  "id": "10004"
				  ,"username": "贤心"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "666"
				  ,"ip": "192.168.0.8"
				  ,"logins": "106"
				  ,"joinTime": "2016-10-14"
				}, {
				  "id": "10005"
				  ,"username": "贤心"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "86"
				  ,"ip": "192.168.0.8"
				  ,"logins": "106"
				  ,"joinTime": "2016-10-14"
				},{
				  "id": "10001"
				  ,"username": "杜甫"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "116"
				  ,"ip": "192.168.0.8"
				  ,"logins": "108"
				  ,"joinTime": "2016-10-14"
				}, {
				  "id": "10002"
				  ,"username": "李白"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "12"
				  ,"ip": "192.168.0.8"
				  ,"logins": "106"
				  ,"joinTime": "2016-10-14"
				  ,"LAY_CHECKED": true
				}, {
				  "id": "10003"
				  ,"username": "王勃"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "65"
				  ,"ip": "192.168.0.8"
				  ,"logins": "106"
				  ,"joinTime": "2016-10-14"
				}, {
				  "id": "10004"
				  ,"username": "贤心"
				  ,"email": "http://demo/table/test@email.com"
				  ,"sex": "男"
				  ,"city": "浙江杭州"
				  ,"sign": "人生恰似一场修行"
				  ,"experience": "666"
				  ,"ip": "192.168.0.8"
				  ,"logins": "106"
				  ,"joinTime": "2016-10-14"
				}]
        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });


            return false;
        });

        $('#closeBtn').click(function () {
              layer.close(parentIndex);
        });
		 
    });
</script>